前端性能优化介绍

什么是 Web 性能

MDN：Web 性能（web performance）是网站或应用程序的客观度量和可感知的用户体验。

• 减少总体加载时间：减少文件体积，减少 HTTP 请求数量、使用预加载
• 使网站尽快可用：仅加载首屏内容，其他内容根据需要进行懒加载
• 平滑和交互性：使用 css 动画代替 js 动画、减少 UI 重绘
• 感知表现：耗时操作要给用户反馈，比如 loading 动画、进度条、骨架屏等提示信息
• 性能测定：性能指标、性能测试、性能监控持续优化

Web 性能包括加载时间、每秒帧数和交互时间等客观度量，以及加载内容所需时间的主观体验。

为什么要关注 Web 性能

• 用户的留存
• 体验与传播
• 搜索排名
• 客户投诉
• 提升工作绩效
• …

如何进行 Web 性能优化

1. 首先需要了解性能指标 - 多快才算快？
2. 使用专业的工具可量化地评估出网站或应用的性能表现
3. 然后立足于网站页面响应的生命周期，分析出造成较差性能表现的原因
4. 最后进行技术改造、可行性分析等具体的优化实施
5. 迭代优化

下面进行简单介绍。

性能指标

Google 制定了一些标准：

• RAIL 性能模型
• 基于用户体验的核心指标
• 新一代型性能指标：Web Vitals

以上链接指向 https://web.dev 需要翻墙访问，后续有详细介绍。

性能测量

通常我们会借助一些工具来完成性能测量：

• 浏览器 DevTools 调试工具
  • 网络监控分析
  • 性能监控分析
  • …
• 灯塔（Lighthouse）
  • 网站整体质量评估，并给出优化建议
• WebPageTest
  • 多测试地点
  • 全面的性能报告
• …

生命周期

网站页面的生命周期，就是经典的面试题 - 从浏览器的地址栏输入一个 URL 后，到整个页面渲染出来的过程。

整个过程包括域名解析，建立 TCP 连接，前后端通过 HTTP 进行会话，压缩与解压缩，以及前端的关键渲染路径等。

把这些阶段拆解开来看，不仅能容易的获得优化性能的启发，而且也能为今后的前端工程师之路构建出完整的知识框架。

网站页面加载的生命周期如下图：

优化方案

• 从发出请求到收到响应的优化，比如 DNS 查询、HTTP 长连接、HTTP2、HTTP 压缩、HTTP 缓存等
• 关键渲染路径优化，比如是否存在不必要的重绘和回流
• 加载过程的优化，比如延迟加载，是否有不必需要在首屏展示的非关键信息，占用了页面加载的时间
• 资源优化，比如图片、视频等不同的格式类型会有不同的使用场景，在使用的过程中是否恰当
• 构建优化，比如压缩合并、基于 Webpack 构建优化方案等
• …